<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <div class="border">
      <!-- 拖拽上传 -->
      <el-upload
        ref="upload"
        class="upload-demo"
        show-file-list
        action="https://jsonplaceholder.typicode.com/posts/"
        :drag="true"
        :on-change="handleChange"
        :limit="1"
        :auto-upload="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <!-- 按钮上传 -->
      <!-- <el-upload
        class="upload-demo"
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :limit="1"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload> -->
      <el-button type="primary" style="margin-top:50px">开始处理</el-button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import * as XLSX from 'xlsx'

export default {
  name: "Home",
  components: {
    // HelloWorld,
  },
  data(){
    return{
      originData: {}, // 原始表格数据
    }
  },
  methods: {
    handleChange(file, fileList) {
      // console.log('file ===> ', file)
      console.log('fileList ===> ', fileList)
      this.readExcel({0:file.raw});
      // this.readFile(file.raw);
    },
    readFile(file){
      console.log('readStart =====>', file)
      const aBlob = new Blob([file], { type: file.type })
      console.log('???', aBlob);
      this.originData = XLSX.read(aBlob, {type: 'binary'})
      console.log('readEnd ====> ', this.originData)
    },
    readExcel (files) { // 表格导入
      if (files.length <= 0) { // 如果没有文件名
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }
      const fileReader = new FileReader()
      fileReader.onload = (files) => {
        try {
          const data = files.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          })
          const wsname = workbook.SheetNames[1]// 取第一张表
          console.log('wsname ----->', wsname, workbook)
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])// 生成json表格内容
          console.log(ws, 'ws是表格里的数据，且是json格式')
          this.originData = ws
          // 重写数据
          this.$refs.upload.value = ''
          // return ws
        } catch (e) {
          console.log(e)
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
    },
  }
};
</script>
<style lang="less" scoped>
.border{
  margin: 100 auto;
  text-align: center;
  padding: 50px 100px;
}
</style>